<template>
  <div>
    <h3>实战 6：可用 slot-scope 自定义列的表格组件 —— Table（方案 2）</h3>

    <table-render ref="table" :columns="columns" :data="data">
      <template slot-scope="{ row, index }" slot="name">
        <input type="text" v-model="editName" v-if="editIndex === index" />
        <span v-else>{{ row.name }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="age">
        <input type="text" v-model="editAge" v-if="editIndex === index" />
        <span v-else>{{ row.age }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="birthday">
        <input type="text" v-model="editBirthday" v-if="editIndex === index" />
        <span v-else>{{ getBirthday(row.birthday) }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="address">
        <input type="text" v-model="editAddress" v-if="editIndex === index" />
        <span v-else>{{ row.address }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="action">
        <div v-if="editIndex === index">
          <button @click="handleSave(index)">保存</button>
          <button @click="editIndex = -1">取消</button>
        </div>
        <div v-else>
          <button @click="handleEdit(row, index)">操作</button>
        </div>
      </template>
    </table-render>
  </div>
</template>
<script>
import TableRender from '../components/table-render/table.vue';

export default {
  components: { TableRender },
  data() {
    return {
      columns: [
        {
          title: '姓名',
          render: (h, { row, column, index }) => {
            return h(
              'div',
              this.$refs.table.$scopedSlots.name({
                row: row,
                column: column,
                index: index
              })
            )
          }
        },
        {
          title: '年龄',
          render: (h, { row, column, index }) => {
            return h(
              'div',
              this.$refs.table.$scopedSlots.age({
                row: row,
                column: column,
                index: index
              })
            )
          }
        },
        {
          title: '出生日期',
          render: (h, { row, column, index }) => {
            return h(
              'div',
              this.$refs.table.$scopedSlots.birthday({
                row: row,
                column: column,
                index: index
              })
            )
          }
        },
        {
          title: '地址',
          render: (h, { row, column, index }) => {
            return h(
              'div',
              this.$refs.table.$scopedSlots.address({
                row: row,
                column: column,
                index: index
              })
            )
          }
        },
        {
          title: '操作',
          render: (h, { row, column, index }) => {
            return h(
              'div',
              this.$refs.table.$scopedSlots.action({
                row: row,
                column: column,
                index: index
              })
            )
          }
        }
      ],
      data: [],
      editIndex: -1,  // 当前聚焦的输入框的行数
      editName: '',  // 第一列输入框，当然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁
      editAge: '',  // 第二列输入框
      editBirthday: '',  // 第三列输入框
      editAddress: '',  // 第四列输入框
    }
  },
  methods: {
    handleEdit(row, index) {
      this.editName = row.name;
      this.editAge = row.age;
      this.editAddress = row.address;
      this.editBirthday = row.birthday;
      this.editIndex = index;
    },
    handleSave(index) {
      this.data[index].name = this.editName;
      this.data[index].age = this.editAge;
      this.data[index].birthday = this.editBirthday;
      this.data[index].address = this.editAddress;
      this.editIndex = -1;
    },
    getBirthday(birthday) {
      const date = new Date(parseInt(birthday));
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();

      return `${year}-${month}-${day}`;
    }
  },
  mounted() {
    this.data = [
      {
        name: '王小明',
        age: 18,
        birthday: '919526400000',
        address: '北京市朝阳区芍药居'
      },
      {
        name: '张小刚',
        age: 25,
        birthday: '696096000000',
        address: '北京市海淀区西二旗'
      },
      {
        name: '李小红',
        age: 30,
        birthday: '563472000000',
        address: '上海市浦东新区世纪大道'
      },
      {
        name: '周小伟',
        age: 26,
        birthday: '687024000000',
        address: '深圳市南山区深南大道'
      }
    ];
  }
}
</script>